import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { ListRawState } from '../home';
import axios from 'axios';
import { Swiper } from 'react-vant'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { Toast, NavBar } from 'react-vant';
import ListItem, { sell } from '../../components/listItem';
import { useDispatch } from 'react-redux';
import { addCar } from '../../store/car/carSlice';
const Index: React.FC = () => {
  const dispatch = useDispatch()
  // 获取 id
  const { id } = useParams();
  const navigate = useNavigate()
  // 详情数据 存储容器
  const [v, setV] = useState<ListRawState>({} as ListRawState);
  // 请求详情数据函数
  const fetchV = async () => {
    const resp = await axios.get('/api/list/' + id);
    setV(resp.data.data)
  }
  useEffect(() => {
    fetchV()
  }, [])
  if (!v.id) {
    return <div>加载中...</div>
  }

  return (
    <div>
      <NavBar
        title="详情"
        onClickLeft={() => navigate(-1)}
      />
      <Swiper>
        {
          v.image.map((v, i) => {
            return <Swiper.Item key={i}>
              <img src={v} alt="" style={{ width: '100%' }} />
            </Swiper.Item>
          })
        }
      </Swiper>

      <ListItem v={v} hiddenImage={true} style={{ height: 120, borderBottom: 'none' }}></ListItem>

      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} badge={{ dot: true }} text='客服' />
        <ActionBar.Icon icon={<CartO />} badge={{ content: 5 }} text='购物车' />
        <ActionBar.Icon icon={<ShopO />} badge={{ content: 12 }} text='店铺' />
        <ActionBar.Button type='warning' text='加入购物车' onClick={() => {
          dispatch(addCar({ ...v, count: 1, state: false }))
        }} />
        <ActionBar.Button type='danger' text='立即购买' />
      </ActionBar>
    </div>
  )
}
export default Index